<template>
    <div class="Learningcenter">
        <div class="Learningcenter-content">
            <div class="Learningcenter-content-left">
                <div class="Learningcenter-content-head">
                    <img :src="unserinfo.avatar"/>
                    <img src="/images/组 11@2x.png" class="Themessage" @click="Toviewmessage"/>
                    <span class="Le-co-nick">{{unserinfo.nick_name}}</span>
                    <div class="Le-co-isme">
                        <label v-if="unserinfo.is_member" class="Ismemebers-ceo">
                            {{unserinfo.member_level == 1?"畅聊会员":unserinfo.member_level == 2?'铂金会员':'钻石会员'}}
                        </label>
                        <label v-else>您还不是会员
                            <span @click="Tomemeber">开通会员</span>
                        </label>
                    </div>
                    <div class="Le-co-myProfit" @click="toMyProfit">
                        <label>我的收益</label>
                    </div>
                    <span @click="Tocaticon" class="Le-co-catcon">{{unserinfo.cat_coin}}</span>
                </div>
                <el-menu router :unique-opened=true   :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @select ="handleSelect"  @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location Le-my-class"></i>
                            <span>我的课程</span>
                        </template>
                        <el-menu-item index="/views/Teachingcenters/Teachcourse">我的课程表</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Historytimetable">历史课程</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location Le-my-class"></i>
                            <span>我的圈子</span>
                        </template>
                        <el-menu-item index="/views/Teachingcenters/Mydynamic">我的动态</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Myfriend">我的好友</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Myphotoalbum">我的相册</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                       <template slot="title">
                            <i class="el-icon-location Le-my-con"></i>
                            <span>我的猫币</span>
                        </template>
                        <el-menu-item index="/views/Teachingcenters/Catbalance">猫币余额</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Catcoindetails">明细</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/views/Learningcenter/Authenticationmanagement" class="menbercen">
                        <i class="el-icon-setting Le-my-memeber"></i>
                        <span slot="title">我的认证</span>
                    </el-menu-item>
                    <!-- <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-setting Le-my-study"></i>
                            <span>我的学习卡</span>
                        </template>
                        <el-menu-item index="/views/Contentswitch/Helplearncard">助学师学习卡</el-menu-item>
                        <el-menu-item index="/views/Contentswitch/Livelectureinstructor">直播课堂学习卡</el-menu-item>
                    </el-submenu> -->
                    <el-menu-item index="/views/Teachingcenters/OrganizationManagementCenter" v-if="unserinfo.mechanism_id !=0" class="menbercen">
                        <i class="el-icon-setting Le-my-memeber"></i>
                        <span slot="title">机构管理中心</span>
                    </el-menu-item>
                    <el-menu-item index="/views/Teachingcenters/Themenberce" class="menbercen">
                        <i class="el-icon-setting Le-my-memeber"></i>
                        <span slot="title">会员中心</span>
                    </el-menu-item>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-setting Le-my-gifts"></i>
                            <span>礼物中心</span>
                        </template>
                        <el-menu-item index="/views/Teachingcenters/Getgift">收到的礼物</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Sendgift">送出的礼物</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Contributionlist">贡献榜</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Platformcontributionlist">平台收入榜</el-menu-item>
                        <el-menu-item index="/views/Teachingcenters/Platformincome">平台贡献榜</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="Learningcenter-content-right">
                <!-- <div v-if="Learningcenter">
                    <Liveclassroom></Liveclassroom>
                </div> -->
                <div>
                    <router-view />
                </div>
            </div>
        </div>
        <div class="refresh" @click="Torefresh">
            <img src="/images/刷新@2x.png"/>
        </div>
        <div class="refreshs" @click="toTop">
            <img src="/images/top.png" alt="">
        </div>
    </div>
</template>
<script>
import Liveclassroom from './TeachingCenter/Teaching/Livelectureinstructor'
export default {
    name:'Learningcenter',
    inject: ['reload'],
    data(){
        return{
            Ismember:false,
            Learningcenter:true,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
        }
    },
    components: {//组件注册
        Liveclassroom,
    },
    methods: {
        toMyProfit(){
            this.$router.push({path:'/views/Teachingcenters/myProfit'})
        },
        Tocaticon(){
            this.$router.push({path:'/views/Teachingcenters/Catbalance'})
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        Tomemeber(){
            this.$router.push({path:'/views/Teachingcenters/Themenberce'})
        },
        Toviewmessage(){//查看消息
            this.handleSelect()
            this.$router.push({path:'/views/Teachingcenters/viewsmessages'})
        },
        handleSelect(){
            this.Learningcenter = false
        },
        Torefresh(){//刷新
            this.reload()
        },
        toTop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;// 实现滚动效果 
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        }
    }
}
</script>
<style lang="less" scoped>
    .Le-co-myProfit{
        color: #47CECF;
        font-size: 14px;
        margin-top: 14px;
        label{
            cursor: pointer;
        }
    }
    .Learningcenter{
        position: relative;
        width: 100%;
        // height: 800px;
        background: #eeeeee;
        margin: 0 auto;
        margin-top: 80px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .Learningcenter-content{
        width: 1400px;
        height: 100%;
        margin: 0 auto;
       display: flex;
    }
    .Learningcenter-content-left{
        display: inline-block;
        background: #ffffff;
        width: 20%;
        border-radius:15px;
        height: auto;
        min-height: 1041px;
    }
    .Learningcenter-content-right{
        display: inline-block;
        width: 80%;
        // background: #ffffff;
        height: 100%;
        margin-left: 12px;
        min-height: 1041px;
        border-radius: 20px;
    }
    /*侧边导航头像样式*/
    .Learningcenter-content-head{
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: 30px;
        img{
            width: 48.15%;
            height: 11.4%;
            border-radius: 100px;
        }
    }
    .Le-co-nick{
        display: block;
        font-size:28px;
        color: #545454;
        font-weight: bold;
    }
    .Le-co-isme{
        margin-top: 20px;
    }
    .Le-co-isme label{
        color: #C2C2C2;
        font-size: 12px;
        span{
            display: inline-block;
            width:40%;
            height:24px;
            line-height: 24px;
            border:1px solid rgba(71,206,207,1);
            border-radius:12px;
            color: #47CECF;
            margin-left: 4%;
            cursor: pointer;
        }
    }
    .Le-co-catcon{
        display:block;
        width: 80%;
        height: 50px;
        line-height: 50px;
        background:rgba(71,206,207,1);
        border-radius:25px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        color: #FFFFFF;
        font-size: 18px;
        background-image: url('/images/形状 1 拷贝 2.png');
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position-x: 28%;
        background-position-y: 50%;
        padding-left: 20px;
        cursor: pointer;
    }
    /*侧边导航样式*/
    .Learningcenter-content-left{//样式穿透去更改element的样式
        /deep/ .el-submenu__title{
            font-weight: bold;
            font-size: 18px!important;
        }
        /deep/ .el-menu-item{
            list-style-type: disc;
            list-style-position: inside;
            padding-left: 20px!important;
            width: 100%;
            min-width: 0;
            text-align: left;
        }
        /deep/.el-submenu {
            text-align: left;
        }
        .menbercen{
            list-style: none;
            font-weight: bold;
            font-size: 18px;
        }
        /deep/.el-menu{
            border-right:#f00 ;
            height: auto;
            border-radius: 20px;
        }
    }
    /*侧边导航标题icon*/
    /deep/.Le-my-class::before{
        content:'';
        display: block;
        background-image: url('/images/我的课程.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;
    }
    /deep/.Le-my-con::before{
        content:'';
        display: block;
        background-image: url('/images/我的猫币.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        background-size:cover;  
    }
    /deep/.Le-my-contd::before{
        content:'';
        display: block;
        background-image: url('/images/我的认证.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    /deep/.Le-my-study::before{
        content:'';
        display: block;
        background-image: url('/images/我的学习.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    /deep/.Le-my-memeber::before{
        content:'';
        display: block;
        background-image: url('/images/会员中心.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    /deep/.Le-my-gifts::before{
        content:'';
        display: block;
        background-image: url('/images/礼物中心.png');
        background-repeat: no-repeat;
        width: 20px;
        height: 18px;
        background-size:cover;  
    }
    .Ismemebers-ceo{
        position: relative;
        display: block;
        width: 40%;
        margin: 0 auto;
        height: 30px;
        line-height: 30px;
        border:1px solid rgba(71,206,207,1);
        border-radius:15px;
        font-size: 14px!important;
        color: #47CECF!important;
        cursor: pointer;
    }
    .Themessage{
        width: auto!important;
        height: auto!important;
        position: absolute;
        cursor: pointer;
        top: -10px;
    }
    /*底部刷新按钮*/
    .refresh{
        position: fixed;
        right: 200px;
        bottom: 90px;
        cursor: pointer;
        width: 41px;
        height: 37px;
        img{
            width: 100%;
        }
    }
    .refreshs{
        position: fixed;
        right: 200px;
        bottom: 40px;
        cursor: pointer;
        width: 41px;
        height: 37px;
        img{
            width: 100%;
        }
    }
</style>